<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<title>创生英语练习单</title>
		<meta name="keywords" content="分享练习单" />
		<meta name="description" content="分享练习单" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css" />
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />

		<style>
			body {
				background-color: #f7faff;
			}

			header {
				background-color: #FFFFFF;
			}

			header span {
				font-weight: bold;
				color: #535353;
			}
		</style>
		<style>

			.shareBtn {
			    background: #4581db;
			    border-radius: 1.875rem;
				color: #FFFFFF;
				padding-top: 0.1rem;
				padding-bottom: 0.1rem;
				padding-left: 0.2rem;
				padding-right: 0.2rem;
			}
			.wxtip {
				background: rgba(0,0,0,0.8); 
				text-align: right; 
				position: fixed; 
				left:0; 
				top: 0; 
				width: 100%; 
				height: 100%; 
				z-index: 998; 
				display: none;
			}
			
			/*css样式*/
			[v-cloak] {
				  display: none;
				}
		</style>
	</head>

	<body class="fadeIn animated">
		<div class="wxtip" id="JweixinTip">
			<img src="img/ic_h5open.png" style="margin-right: 0.2rem;"/>
		</div>
		<div class="grid t-c clearfix" style="color: #848484;line-height: 0.8rem;background-color: #848484;padding-left: 0.3rem;padding-right: 0.3rem;">
			<div class="box col-6 t-l h8 f30" style="color: #FFFFFF;"><img src="img/app_icon.png" class="w6 radius-o f28" style="line-height: 0.8rem;margin-right: 0.2rem;" />创生英语学生端</div>
			<div class="box col-6 t-r h8 f30"><a href="javascript:awakenApp('cskid://')" class="shareBtn h6 w20 f28"   id="download">立即进入</a></div>
		</div>
		<div id="message" v-cloak>
			<header class="ui-header clearfix w75 h10 h8 f46 pl3 pr3 color8 t-c o-h">
				<div class="ui-header-c f32 h10" style="line-height: 1rem;">
					<span>
						练习详情
					</span>
				</div>
			</header>
			<div style="margin: 0.3rem;background-color: #FFFFFF;" class="radius10">
				<div class="f28" style="padding-left: 0.3rem;padding-top: 0.2rem;color: #343d4a;">学科:英语</div>
				<div class="f28"style="padding-left: 0.3rem;padding-bottom: 0.2rem;padding-top: 0.1rem;color: #343d4a;" v-cloak>截至时间:{{end_time}}</div>
			</div>
			
			<div style="margin: 0.3rem;background-color: #FFFFFF;padding-bottom: 0.3rem;" class="radius10">
				<div class="h8 f28 radius10" style="padding-left: 0.3rem;line-height: 0.8rem;background-color: #e8f1ff;color: #343d4a;" v-cloak>在线练习:(预计用时:{{length}})</div>
				<div class="f28"style="padding-left: 0.3rem;margin-top: 0.2rem;color: #343d4a;" v-cloak>单元:{{unit_name}}</div>
				<div  v-for="(item, index) in list">
					<div class="f28"style="padding-left: 0.3rem;margin-top: 0.2rem;color: #343d4a;" v-cloak>{{index+1}}.{{item.cate_name}}</div>
				</div>
				
			</div>
		</div>
		
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
	<!-- 百度 CDN: -->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#message',
			data: {
				params: getQueryString("params"),
				terminal: '',
				end_time:'',
				length : '',
				unit_name : '',
				list : [],
			},
			mounted: function() {
				this.isterminal();
				this.exerciseInfo();
				if (browser.versions.weixin) {
					document.getElementById('JweixinTip').style.display='block';
				}
			},
			methods: {
				//判断 android ios
				isterminal: function() {
					var that = this;
					if (that.isTerminal == 'android') {
						that.isTerminal = 1;
					} else if (that.isTerminal == 'ios') {
						that.isTerminal = 2;
					}
				},
				exerciseInfo: function() {
	
					var b = new Base64();
					var str = b.decode(this.params);
					var objParams = JSON.parse(str);
					console.log(objParams);
					this.terminal = objParams.terminal;
					//分享报告请求方法
					this.$http.post(exerciseInfoApi, objParams, {
						emulateJSON: true
					}).then(function(res) {
						if (res.data.error_code == 200) {
							console.log(res.data.data)
							let shareInfo = res.data.data;
							this.end_time = formatUnixtimestamp(shareInfo.end_time);
							this.length = s_to_hs(shareInfo.length);
							this.list = shareInfo.list;
							this.unit_name = shareInfo.unit_name;

						} else {
							//请求错误
							window.android.errorMsg(res.data.info);
						}
					}).catch(e => {
						// 打印一下错误
						console.log(e);
					})
				},
				click_x5 : function() {
					if (browser.versions.android) {
						console.log('-------------------打印成功，走了调用安卓分享---------------------');
						AndroidBack.onX5ButtonClicked();
					}
				}
			}
		});

		$(function() {
			var flag = true;
			var off = true;
			$('.showAll1').on('click', function() {
				if (flag) {
					$('.liNone').slideDown().removeClass('liNone');
					$(this).text('收回全部');
					flag = false;
				} else {
					$('.isClass').slideUp().addClass('liNone');
					$(this).text('展开全部');
					flag = true;
				}
			});

		});
		
		
	</script>
</html>
